<!doctype html>
<html class="no-js">

<head>
    <title>幼儿园</title>
    <#include "/boya/template/meta.html" />
</head>

<body>
    <#import "/boya/template/marc.html" as mc />
    <@mc.content>
        <div id="app" class="page">
            <div class="title">食品及原料配送记录 / 批量新增 /</div>
            <el-form ref="form" label-width="90px">
                <el-form-item label="配送日期">
                    <el-date-picker v-model="info.date" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="配送经营点">
                    <el-select v-model="info.targetId" filterable placeholder="请选择配送经营点">
                        <el-option v-for="(item, index) in schools" :key="item.attrs.id" :label="item.attrs.name" :value="item.attrs.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="storage-list">
                    <div class="storage-item" v-for="(storage, storageIndex) in storagesToAdd">
                        <el-form-item label="配送产品">
                            <el-select v-model="storage.storageId" filterable placeholder="请选择配送产品" @change="onStorageChange(storageIndex, storage.storageId)">
                                <el-option v-for="(item, index) in storages" :key="item.attrs.id" :label="item.attrs.name" :value="item.attrs.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="计量单位">
                            <el-input v-model="storage.unit" placeholder="请输入计量单位" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="保质期限">
                            <el-date-picker v-model="storage.exp" type="date" placeholder="选择保质期限" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="产品批号">
                            <el-input v-model="storage.no" placeholder="请输入产品批号"></el-input>
                        </el-form-item>
                        <el-form-item label="数量">
                            <el-input v-model="storage.count" type="number" placeholder="请输入数量"></el-input>
                        </el-form-item>
                        <el-form-item label="单价">
                            <el-input v-model="storage.price" type="number" placeholder="请输入单价"></el-input>
                        </el-form-item>
                        <div class="storage-del" @click="delStorage(storageIndex)" v-if="storagesToAdd.length > 1">
                            <i class="el-icon-close"></i>
                        </div>
                    </div>
                    <div class="storage-add">
                        <el-button @click="addStorage" type="text" size="small"><i class="el-icon-plus"></i>添加产品</el-button>
                    </div>
                </div>
                <el-form-item label="经手人">
                    <el-input v-model="info.operator" placeholder="请输入经手人"></el-input>
                </el-form-item>
                <el-form-item label="验收人">
                    <el-input v-model="info.acceptor" placeholder="请输入验收人"></el-input>
                </el-form-item>
                <el-form-item label="附件">
                    <el-upload action="/boya/api/uploadFile" :on-success="handleSuccess" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </@mc.content>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                info: {
                    date: this.dateFtt("yyyy-MM-dd", new Date()),
                    targetId: '',
                    operator: '',
                    acceptor: ''
                },
                fileList: [],
                schools: [],
                storages: [],
                storagesToAdd: [
                    { storageId: '', unit: '', exp: '', no: '', count: '', price: '' }
                ]
            }
        },
        mounted: function() {
            var self = this;
            var schoolStr = '${schools!}';
            if (schoolStr != '') {
                this.schools = ${schools!'[]'}
            }
            var storageStr = '${storages!}';
            if (storageStr != '') {
                this.storages = ${storages!'[]'}
            }
        },
        methods: {
            submit() {
                var self = this;
                if (self.info.targetId == '') {
                    msg("请选择配送经营点");
                    return;
                }
                if (self.info.date == '') {
                    msg("请选择日期");
                    return;
                }
                for (var i = 0; i < self.storagesToAdd.length; i++) {
                    if (!self.storagesToAdd[i].storageId) {
                        msg("请输入第" + (i + 1) + "项的配送产品");
                        return;
                    }
                    if (!self.storagesToAdd[i].count) {
                        msg("请输入第" + (i + 1) + "项的产品数量（不能为空或为0）");
                        return;
                    }
                }
                var storagesJson = JSON.stringify(self.storagesToAdd);
                var files = '';
                for (var i = 0; i < self.fileList.length; i++) {
                    files += self.fileList[i].url + ";";
                }
                var map = {
                    date: self.info.date,
                    targetId: self.info.targetId,
                    operator: self.info.operator,
                    acceptor: self.info.acceptor,
                    attachment: files,
                    storagesJson: storagesJson
                }
                if (self.info.id != '') {
                    map['id'] = self.info.id;
                }
                var param = Qs.stringify(map);
                axios({
                        url: '/boya/submitExportBatch',
                        method: 'post',
                        data: param,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        if (response.data.status == 200) {
                            var referer = '${referer!}';
                            if (referer) {
                                window.location.href = referer;
                            } else {
                                window.location.href = "/boya/exportList";
                            }
                        } else {
                            msg("保存失败：" + response.data.msg);
                            console.log(response.data);
                        }
                    })
                    .catch(function(error) {
                        msg("保存失败");
                        console.log(error);
                    });
            },
            delFile(index) {
                var self = this;
                confirm("确认删除？", function() {
                    self.fileList.splice(index, 1);
                })
            },
            dateFtt(fmt, date) {
                var o = {
                    "M+": date.getMonth() + 1, //月份
                    "d+": date.getDate(), //日
                    "h+": date.getHours(), //小时
                    "m+": date.getMinutes(), //分
                    "s+": date.getSeconds(), //秒
                    "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                    "S": date.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt))
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt))
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            },
            handleSuccess(response, file, fileList) {
                var self = this;
                self.fileList = new Array;
                self.fileList.push({
                    name: response.info.split("=")[1],
                    url: response.info
                });
            },
            handlePreview(file) {
                window.location.href = file.url;
            },
            handleRemove(file, fileList) {
                this.fileList = new Array;
            },
            handleExceed(files, fileList) {
                this.$message.warning('只能上传 1 个文件');
            },
            beforeRemove(file, fileList) {
                return this.$confirm('确定移除 ' + file.name + '？');
            },
            onStorageChange(index, val) {
                var self = this;
                loading();
                var param = Qs.stringify({
                    id: val
                });
                axios({
                    url: '/boya/storageInfo',
                    method: 'post',
                    data: param,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(function(response) {
                    endLoading();
                    if (response.data.status == 200) {
                        self.storagesToAdd[index].unit = response.data.info.unit;
                    } else {
                        msg("获取信息失败：" + response.data.msg);
                        console.log(response.data);
                    }
                }).catch(function(error) {
                    msg("获取信息失败");
                    console.log(error);
                });
            },
            addStorage() {
                this.storagesToAdd.push({ storageId: '', unit: '', exp: '', no: '', count: '', price: '' });
            },
            delStorage(index) {
                this.storagesToAdd.splice(index, 1);
            }
        }
    })
    </script>
    <style type="text/css">
    .page {
        padding: 15px;
    }

    .title {
        margin-bottom: 3rem;
        font-size: 1.2em;
    }

    .storage-list {
        position: relative;
    }

    .storage-item {
        position: relative;
        padding-top: 22px;
        padding-right: 20px;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }

    .storage-del {
        position: absolute;
        top: 22px;
        right: 22px;
        cursor: pointer;
        font-size: 1.5em;
    }

    .storage-add {
        padding: 0 0 10px 100px;
    }

    .el-upload__input {
        display: none!important
    }
    </style>
</body>

</html>